<template>
  <div class="exam-paper-container">
    <!-- 顶部信息栏 -->
    <div class="exam-header">
      <el-card shadow="never">
        <el-row type="flex" justify="space-between" align="middle">
          <el-col :span="6">
            <h2>{{ examInfo.name }}</h2>
          </el-col>
          <el-col :span="12" class="text-center">
            <div class="countdown">
              剩余时间2：{{ remainingTime }}
            </div>
          </el-col>
          <el-col :span="6" class="text-right">
            <el-button type="primary" @click="submitExam">交卷</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>

    <!-- 主体内容区 -->
    <div class="exam-content">
      <el-row :gutter="20">
        <!-- 左侧题目列表 -->
        <el-col :span="18">
          <div class="question-list">
            <div v-for="(question, index) in questions" :key="index" class="question-item">
              <el-card shadow="hover">
                <div class="question-header">
                  <span class="question-type">{{ question.type }}</span>
                  <span class="question-score">（{{ question.score }}分）</span>
                </div>
                
                <div class="question-content">
                  <div class="question-title">
                    {{ index + 1 }}. {{ question.content }}
                  </div>

                  <!-- 选择题选项 -->
                  <div v-if="['单选题', '多选题'].includes(question.type)" class="options">
                    <el-radio-group v-if="question.type === '单选题'" v-model="answers[index]">
                      <el-radio 
                        v-for="(option, optIndex) in question.options" 
                        :key="optIndex"
                        :label="option.value"
                      >
                        {{ option.label }}
                      </el-radio>
                    </el-radio-group>

                    <el-checkbox-group v-else v-model="answers[index]">
                      <el-checkbox 
                        v-for="(option, optIndex) in question.options" 
                        :key="optIndex"
                        :label="option.value"
                      >
                        {{ option.label }}
                      </el-checkbox>
                    </el-checkbox-group>
                  </div>

                  <!-- 判断题 -->
                  <div v-else-if="question.type === '判断题'" class="options">
                    <el-radio-group v-model="answers[index]">
                      <el-radio :value="true">正确</el-radio>
                      <el-radio :value="false">错误</el-radio>
                    </el-radio-group>
                  </div>

                  <!-- 填空题 -->
                  <div v-else-if="question.type === '填空题'" class="fill-blank">
                    <el-input
                      v-model="answers[index]"
                      type="text"
                      placeholder="请输入答案"
                    />
                  </div>

                  <!-- 问答题 -->
                  <div v-else-if="question.type === '问答题'" class="essay">
                    <el-input
                      v-model="answers[index]"
                      type="textarea"
                      :rows="4"
                      placeholder="请输入答案"
                    />
                  </div>
                </div>
              </el-card>
            </div>
          </div>
        </el-col>

        <!-- 右侧答题卡 -->
        <el-col :span="6">
          <div class="answer-card">
            <el-card shadow="never">
              <div slot="header">
                <span>答题卡</span>
                <el-tag type="success" style="margin-left: 10px">
                  已答: {{ answeredCount }}/{{ questions.length }}
                </el-tag>
              </div>
              <div class="question-nav">
                <el-button
                  v-for="(question, index) in questions"
                  :key="index"
                  size="small"
                  :class="[
                    'answer-btn',
                    { 'is-current': currentQuestionIndex === index },
                    { 'is-answered': !!answers[index] }
                  ]"
                  @click="handleCardClick(index)"
                >
                  {{ index + 1 }}
                </el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 提交确认对话框 -->
    <el-dialog
      title="确认提交"
      :visible.sync="submitDialogVisible"
      width="30%"
    >
      <span>确定要提交试卷吗？提交后将无法修改答案。</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="submitDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmSubmit">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ExamPaper',
  data() {
    return {
      examInfo: {
        name: '2024年春季期末考试',
        duration: 120
      },
      remainingTime: '01:59:59',
      questions: [
        {
          type: '单选题',
          content: '在计算机中，用于存储信息的最小单位是（ ）。',
          options: [
            { label: 'A. 字节（Byte）', value: 'A' },
            { label: 'B. 位（bit）', value: 'B' },
            { label: 'C. 字（Word）', value: 'C' },
            { label: 'D. 双字（Double Word）', value: 'D' }
          ],
          score: 2
        },
        {
          type: '多选题',
          content: '以下属于计算机输入设备的是（ ）。',
          options: [
            { label: 'A. 键盘', value: 'A' },
            { label: 'B. 鼠标', value: 'B' },
            { label: 'C. 打印机', value: 'C' },
            { label: 'D. 显示器', value: 'D' },
            { label: 'E. 扫描仪', value: 'E' }
          ],
          score: 4
        }
      ],
      answers: {},
      submitDialogVisible: false
    }
  },
  computed: {
    answeredCount() {
      return Object.keys(this.answers).length
    }
  },
  methods: {
    getQuestionButtonType(index) {
      return this.answers[index] ? 'primary' : 'info'
    },
    scrollToQuestion(index) {
      const element = document.querySelectorAll('.question-item')[index]
      element.scrollIntoView({ behavior: 'smooth' })
    },
    submitExam() {
      this.submitDialogVisible = true
    },
    confirmSubmit() {
      // 提交试卷的逻辑
      this.submitDialogVisible = false
    }
  }
}
</script>

<style scoped>
.exam-paper-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: 100vh;
}

.exam-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  margin-bottom: 20px;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.countdown {
  font-size: 24px;
  color: #409EFF;
  font-weight: bold;
}

.question-list {
  margin-bottom: 20px;
}

.question-item {
  margin-bottom: 20px;
}

.question-header {
  margin-bottom: 15px;
}

.question-type {
  font-weight: bold;
  color: #409EFF;
}

.question-score {
  color: #F56C6C;
  margin-left: 10px;
}

.question-title {
  margin-bottom: 15px;
  font-size: 16px;
}

.options {
  margin-left: 20px;
}

.fill-blank, .essay {
  margin-top: 10px;
}

.answer-card {
  position: sticky;
  top: 90px;
}

.question-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.el-radio, .el-checkbox {
  display: block;
  margin-left: 0;
  margin-bottom: 10px;
}

.el-radio__label, .el-checkbox__label {
  white-space: normal;
}

.question-nav .answer-btn {
  background: #f0f4fa;
  color: #333 !important;
  border: 2px solid transparent;
  transition: all 0.2s;
}
.question-nav .answer-btn.is-current {
  border-color: #409EFF;
  color: #333 !important;
  z-index: 2;
}
.question-nav .answer-btn.is-answered {
  background: #409EFF !important;
  color: #FFD600 !important; /* 已作答数字为亮黄色 */
  border-color: #409EFF;
}
.question-nav .answer-btn.is-current.is-answered {
  background: #409EFF !important;
  color: #FFD600 !important;
  border-color: #409EFF;
}
</style>